<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="分组" prop="groupId">
        <el-input style="width: 190px;" v-model="queryParams.groupId" placeholder="请输入原名" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="上传时间">
        <DaterangePicker v-model:startTime="queryParams.uploadStartTime" v-model:endTime="queryParams.uploadEndTime"></DaterangePicker>
      </el-form-item>
      <el-form-item label="关键字" prop="keyword">
        <el-input style="min-width: 240px;" v-model="queryParams.keyword" placeholder="多个以空格隔开" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
      
                <el-button type="primary" plain icon="Plus" @click="handleFile" v-hasPermi="['system:list:upload']">上传文件</el-button>
            </el-col> -->
      <!-- <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="handleImage" v-hasPermi="['system:list:upload']">上传图片
                </el-button>
            </el-col> -->
      <!-- <el-col :span="1.5">
                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:list:remove']">删除
                </el-button>
            </el-col> -->

      <!-- <el-col :span="1.5">
                <el-button :type="previewFlag ? 'warning' : 'success'" plain @click="handleListPreview(!previewFlag)">{{ previewFlag ? "禁用" : "启用" }}预览</el-button>
            </el-col> -->
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="ossList" border>
      <el-table-column label="序号" align="center" width="60" type="index" :index="(index)=>{return (index +  1)}" />
      <el-table-column label="文件名称" align="center" prop="fileName" min-width="100" show-overflow-tooltip />
      <el-table-column label="文号" align="center" min-width="100" prop="documentNo" />
      <el-table-column label="发文单位" align="center" width="120" prop="documentGov" />
      <el-table-column label="发文时间" align="center" width="120" prop="documentTime">
        <template #default="scope">
          <span>{{ parseTime(scope.row.documentTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="公开范围" align="center" width="160" prop="openType" :formatter="openTypeFormat" />
      <!-- <el-table-column label="文件描述" align="center" prop="remark" min-width="100" show-overflow-tooltip /> -->
      <el-table-column label="上传人" align="center" width="120" prop="uploadBy" />
      <el-table-column label="上传单位" align="center" prop="uploadDeptName" />
      <el-table-column label="上传时间" align="center" prop="uploadTime" width="140">
        <template #default="scope">
          <span>{{ parseTime(scope.row.uploadTime, "{y}-{m}-{d} {h}:{i}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240">
        <template #default="scope">
          <el-button link type="primary" icon="View" @click="handlePreview(scope.row)">预览</el-button>
          <el-button link type="info" icon="Document" @click="handleView(scope.row)">详情</el-button>
          <el-button link type="warning" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
          <!-- <el-button link type="primary" icon="Download" @click="handleDownload(scope.row)">下载</el-button> -->
          <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script setup>
import { knowledgeList, knowledgeDel, knowledgeExport } from "@/api/database";
import DaterangePicker from "@/components/DaterangePicker";

const { proxy } = getCurrentInstance();
const router = useRouter();

const { sys_file_open_type } = proxy.useDict("sys_file_open_type");

const buttonLoading = ref(false); // 按钮loading
const loading = ref(true); // 遮罩层
const exportLoading = ref(false); // 导出遮罩层
// const ids = ref([]); // 选中数组
// const single = ref(true); // 非单个禁用
const multiple = ref(true); // 非多个禁用
const showSearch = ref(true); // 显示搜索条件
const total = ref(0); // 总条数
const ossList = ref([]); // OSS对象存储表格数据
const title = ref(""); // 弹出层标题
const type = ref(0);
const open = ref(false); // 是否显示弹出层
const previewFlag = ref(false); // 预览列表图片
const imageUrl = ref(undefined);

const data = reactive({
  form: {}, // 表单参数
  queryParams: {
    // 查询参数
    pageNum: 1,
    pageSize: 15,
    groupId: null,
    keyword: null,
    uploadEndTime: null,
    uploadStartTime: null,
  },
  rules: {
    // 表单校验
    file: [{ required: true, message: "文件不能为空", trigger: "blur" }],
  },
});

const { queryParams, form, rules } = toRefs(data);

function handleAvatarSuccess(res, file) {
  imageUrl.value = URL.createObjectURL(file.raw);
  form.value.file = res.file;
}
function beforeAvatarUpload(file) {
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    proxy.$modal.msgError("上传头像图片大小不能超过 2MB!");
  }
  return isLt2M;
}
/** 查询OSS对象存储列表 */
function getList() {
  loading.value = true;
  knowledgeList(queryParams.value).then((response) => {
    ossList.value = response.rows;
    total.value = response.total;
    loading.value = false;
    imageUrl.value = undefined;
  });
}
function checkFileSuffix(fileSuffix) {
  let arr = ["png", "jpg", "jpeg"];
  return arr.some((type) => {
    return fileSuffix.indexOf(type) > -1;
  });
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  queryParams.value.uploadStartTime = undefined;
  queryParams.value.uploadEndTime = undefined;
  proxy.resetForm("queryForm");
  handleQuery();
}

/** 任务日志列表查询 */
function handleOssConfig() {
  router.push({ path: "/system/download-config/index" });
}
/** 文件按钮操作 */
function handleFile() {
  reset();
  open.value = true;
  title.value = "上传文件";
  type.value = 0;
}
/** 图片按钮操作 */
function handleImage() {
  reset();
  open.value = true;
  title.value = "上传图片";
  type.value = 1;
}
/** 提交按钮 */
function submitForm() {
  if (type === 1) {
    proxy.$refs["imageUpload"].handleUpload();
  }
  open.value = false;
  getList();
}
// 下载
function handleDownload(row) {
  proxy.OosDownload.oos(row.id);
}
// 预览
function handlePreview(row) {
  proxy.OosDownload.preview(row.fileUrl);
}
/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal
    .confirm('是否确认删除文件id为"' + row.id + '"的数据项?', {
      type: "warning",
    })
    .then(() => {
      loading.value = true;
      return knowledgeDel({ id: row.id });
    })
    .then(() => {
      loading.value = false;
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .finally(() => {
      loading.value = false;
    });
}
// 预览列表图片状态修改
function handleListPreview() {
  previewFlag.value = !previewFlag.value;
}
// 字典状态字典翻译
function openTypeFormat(row, column) {
  return proxy.selectDictLabel(sys_file_open_type.value, row.openType);
}
/** 新增 **/
function handleAdd() {
  router.push({ path: "/database/details" });
}
/** 详情 **/
function handleView(row) {
  router.push({
    path: "/database/details",
    query: { type: "view", id: row.id },
  });
}
/** 修改 **/
function handleUpdate(row) {
  router.push({
    path: "/database/details",
    query: { type: "edit", id: row.id },
  });
}
/** 导出按钮操作 */
function handleExport() {
  proxy.$modal
    .confirm("是否确认导出所有数据项", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
    .then(() => {
      const queryData = Object.assign({}, queryParams.value, {
        pageNum: 1,
        pageSize: 10000,
      });
      exportLoading.value = true;
      return knowledgeExport(queryData);
    })
    .then((response) => {
      proxy.download(response.data);
      exportLoading.value = false;
    })
    .catch(() => {});
}

getList();
</script>

<style>
</style>
